<template>
    <div>
        <!-- 第一行 -->
        <el-row class="grid-row" type="flex" justify="center" align="middle" style="height: 60vh;">
            <el-col :span= "Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; transform: translateY(200px);">
                    <div class="icon"><i class="el-icon-folder" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px;  transform: translateY(0px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px;  transform: translateY(250px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row id="login" class="grid-row" type="flex" justify="center" align="middle" style="height: 80vh;">
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 20px; transform: translateY(80px);">
                    <div class="icon"><i class="el-icon-mobile" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="Number('8')" class="grid-item">
                <!-- 登录框 -->
                <el-card class="login-card" style="width: 90%; height: 600px; margin-top: 20px;transform: translateY(50px);">
                    <h2 style="text-align: center;margin-bottom: 20px;">用户注册</h2>
                    <el-form :model="form" :rules="rules"  label-width="80px">
                        <!-- Email -->
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                            <el-button type="primary" id="btn" @click="getCaptcha">发送验证码<p id="timer"></p></el-button>

                        </el-form-item>

                        <el-form-item label="验证码" prop="captcha">
                            <el-input v-model="captcha" placeholder="请输入六位验证码"></el-input>
                        </el-form-item>

                        <!-- 名称 -->
                        <el-form-item label="昵称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入昵称"></el-input>

                        </el-form-item>
                        <!-- 密码 -->
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="form.password"  placeholder="请输入密码"></el-input>
                        </el-form-item>



                        <!-- 年龄 -->
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="form.age" placeholder="请输入年龄"
                                      @input="(value)=>{this.form.age = value.replace(/[^\d]/g, '');}"
                            ></el-input>
                        </el-form-item>

                        <!-- 性别 -->
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择性别">
                                <el-option label="男" value="M"></el-option>
                                <el-option label="女" value="F"></el-option>
                                <el-option label="未知" value="U"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                    <el-row justify="right" align="middle" style="transform: translateX(80px)">
                        <el-col :span="Number('8')">
                            <el-button type="primary" @click="signupPost()">确定</el-button>
                        </el-col>
                        <el-col :span="Number('8')">
                            <el-button type="primary" @click="()=>{ this.$router.replace('/userLogin')}">取消</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 30px; transform: translateY(130px);">
                    <div class="icon"><i class="el-icon-loading" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row class="grid-row" type="flex" justify="center" align="middle" style="height: 60vh;">
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 10px; transform: translateY(0px);">
                    <div class="icon"><i class="el-icon-collection-tag" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 50px; transform: translateY(50px);">
                    <div class="icon"><i class="el-icon-present" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="Number('8')" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 20px; transform: translateY(10px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id:null,
                email:null,
                password:null,
                name:null,
                age:null,
                sex:'U',
                isvalid:true,
                balance:null
            },
            captcha:null,
            rules: {
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                captcha: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
        };
    },
    methods:{
        signupPost(){
            this.$axios.post(this.$httpUrl + '/user/signup', {
                "form": this.form,
                "captcha": this.captcha
            }).then(res => res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '注册成功,uid:'+res.data.id,
                        type: 'success',
                        duration: 0
                    });
                    this.$router.replace('/userLogin');
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '注册失败'
                    });
            })
        },
        getCaptcha(){
            const btn = document.getElementById("btn");
            const timerDisplay = document.getElementById("timer");
            // 禁用按钮
            btn.disabled = true;
            // 设置计时器 1分钟
            let timeLeft = 60;
            const timer = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = `(${timeLeft}秒后可用)`;
                // 当时间到达 0 秒时，清除计时器并恢复按钮
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    timerDisplay.textContent = "";
                    btn.disabled = false;
                }
            }, 1000);
            this.$axios.post(this.$httpUrl + '/mail/sendCaptcha',  {"to":this.form.email}).then(res => res.data).then(res => {
                console.log(res.code);
                if (res.code === 200) {
                    this.$notify({
                        title: '已发送',
                        type: 'success',
                    });
                }
            })
        }
    },
    mounted() {

        window.scrollTo(0, 450);
        document.body.style.overflowY = 'hidden';
    }

};
</script>


<style>
.grid-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
.grid-item {
    margin: 5px;
}
.card {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.login-card {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}
.title {

}
.icon {
    text-align: center;
    line-height: 300px;
    height: 300px;
}

</style>